<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        
            .box {
                margin: 100px 200px;
            }

            .ipt {
                color: gray;
                border: 5px solid green;
            }

            .focus {
                color: black;
                border: 5px solid pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <input type="text" value='邮箱/ID/手机号' class="ipt" />
        </div>
        <script>
            var ipt = document.querySelector('.ipt');
            ipt.onfocus = function() {
                if (this.value == '邮箱/ID/手机号') {
                    this.value = '';
                }
                ipt.className = 'focus';
                this.style.outline = 'none';
            }
            ipt.onblur = function() {
                if (this.value == '') {
                    this.value = '邮箱/ID/手机号';
                }
                ipt.className = 'ipt';

            }
        </script>
    </body>
</html>
